<template>
  <div>
    <van-cell title="入住/离店" :value="date" @click="show = true" />
    <van-calendar v-model:show="show" type="range" 
    @confirm="onConfirm" @close="getgetget"/>
  </div>

  <div class="queren" v-if="querenshow" @click="gotohotel1">
    <p>{{this.key1()}}成人{{this.key2()}}儿童,{{date}}({{tianshu}}晚)</p>
    <span>确认</span>
  </div>
</template>

<script>
export default{
    data(){
        return{
            date:"",
            show:false,
            tianshu:"",
            //确认框默认隐藏
            querenshow:false,
        }
    },
    methods:{
        formatDate(date){
            return `${date.getMonth()+1}月${date.getDate()}日`
        },
        onConfirm(values){
            const [start,end]=values
            this.show=false
            var startyue=this.formatDate(start).split("月")[0]
            var endyue=this.formatDate(end).split("月")[0]
            var startri=this.formatDate(start).split("月")[1].split("日")[0]
            var endri=this.formatDate(end).split("月")[1].split("日")[0]
            if(startri>endri&&startyue<endyue){
                //这个月的天数
                let date11=new Date(2022,startyue,0)
                //当前天数
                let date22=date11.getDate()-startri
                this.tianshu=parseInt(date22)+parseInt(endri)
                console.log(this.tianshu)

            }else if(startri<=endri&&startyue<endyue){
                let date11=new Date(2022,startyue,0)
                let date22=date11.getDate()-startri
                this.tianshu=parseInt(date22)+parseInt(endri)
                console.log(this.tianshu)
                
            }else{
                this.tianshu=endri-startri
                console.log(this.tianshu)
            }
            
            this.date=`入住${this.formatDate(start)}-离店${this.formatDate(end)}`

            console.log(this.date)
            this.querenshow=true
        },
        getgetget(){
            // //获取天数数据
            // this.$store.commit("gettianshu",this.tianshu)
            // // this.$store.commit("getaddressdata",this.tianshu)
            // //获取入住信息
            // this.$store.commit("getruzhudata",this.date)
            // // this.$store.commit("getaddressdata",this.date)
        },
        gotohotel1(){
            this.key3()
            this.$bus.emit("getdatedata",this.date)
            this.$bus.emit("gettianshudata",this.tianshu)
        }
    },
    mounted(){
        // this.maxren11 = this.$store.state.maxren;
        // this.minren11 = this.$store.state.minren;
    },
    inject:["key1","key2","key3"],
    emits:["getdatedata","gettianshudata"]
}
</script>

<style lang="scss" scoped>
.queren{
    width: 315px;
    height: 50px;
    background-color: #fdcd19;
    border-radius: 30px;
    margin-left: 30px;
    margin-top: 30px;
    display: flex;
    flex-direction: column;
    p{
        font-size: 14px;
        text-align: center;
        margin: 5px;
    }
    span{
        text-align: center;
    }
}
</style>